<template>
	<view class="">
		<view class="" :style="'height: '+statusBarHeight+'px;'">
			
		</view>
		<view class="head">
			<image src="../../static/chanchu.png" mode=""></image>
			<view class="head_left">
				<image src="../../static/news.png" mode=""></image>
				<image src="../../static/node.png" mode=""></image>
				<image src="../../static/shop.png" mode=""></image>
				<image src="../../static/share.png" mode=""></image>
			</view>
		</view>
		<view class="node">
			<view class="">
				<view class="node_num">
					6,547.00
				</view>
				<view class="node_name">
					绿积分
				</view>
			</view>
			<view class="">
				<view class="node_num">
					6,547.00
				</view>
				<view class="node_name">
					蓝积分
				</view>
			</view>
			<view class="">
				<view class="node_num">
					6,547.00
				</view>
				<view class="node_name">
					红积分
				</view>
			</view>
		</view>
		<view class="" style="position: relative;height: 300rpx;">
			<view :class="{animate:flag,energyItme:true}" style="" v-for="(item,index) in energyList"
				:style="{top:item.top + 'rpx',left:item.left + 'rpx',animationDelay:item.time + 's'}">
				<image src="../../static/chanchu.png" mode=""></image>
			</view>
		</view>
		<view class="svgetext">
			<div class="svgaPage">
				<div id="svgaBox"></div>
			</div>
			<view class="">
				<image src="../../static/allone.png" mode=""></image>
			</view>
		</view>
		<view class="shopBox">
			<view class="tabLists">
				<view class="tabLists_left">
					<view class="tabItem" :class="tabIndex==index?'color':''" @click="changeTab(index)"
						v-for="(item,index) in  tabList" :key="index">
						<view class="">
							{{item.name}}
						</view>
						<view :class="tabIndex==index?'active':'' ">
							
						</view>
					</view>
				</view>
				<image src="../../static/serch.png" mode=""></image>
			</view>
			<view class="shopList">
				<view class="shopItem" v-for="(item1,index1) in product" :key="index1">
					<view class="shopInfo">
						<view class="">
							<image :src="$fun.imgUrl(item1.image)" mode=""></image>
						</view>
						<view class="info">
							<view class="title">
								{{item1.name}}
							</view>
							<view class="title1">
								{{item1.title}}
							</view>
							<view class="title1" style="font-size: 22rpx;">
								销量:{{item1.num}}
							</view>
		
							<view class="flex-between" style="align-items: center;">
								<view class="money">
									￥<text style="color: #ff3456;">{{item1.money}}</text>
								</view>
								<view class="btn" @click="jump(`/pageC/shopDetail/shopDetail?ids=${item1.id}`)">
									立即购买
								</view>
							</view>
							<view class="tagBox" v-if="item1.label">
								<view class="tag" v-for="(item2,index2) in  item1.label" :key="index2">
									{{item2}}
								</view>
							</view>
						</view>
					</view>
				</view>
				<u-loadmore status="已经到底了哦~" line/>
				<!-- <u-divider text="已经到底了哦~"></u-divider> -->
			</view>
		</view>
	</view>
</template>

<script>
	import SVGA from '../../util/svga.min.js';
	export default {
		data() {
			return {
				title: '星之宇',
				statusBarHeight:0,
				flag:false,
				energyList:[
					{
						top: 250,
						left: 100,
						time: Math.random(),
						// flag:false,
						// isShow:true,
					},
					{
						top: 200,
						left: 250,
						time: Math.random(),
						// flag:false,
						// isShow:true,
					},
					{
						top: 100,
						left: 350,
						time: Math.random(),
						// flag:false,
						// isShow:true,
					},
					{
						top: 200,
						left: 450,
						time: Math.random(),
						// flag:false,
						// isShow:true,
					},
					{
						top: 250,
						left: 550,
						time: Math.random(),
						// flag:false,
						// isShow:true,
					},
				],
				tabList:[
					{name:'设备托管'},
					{name:'自主上机'},
				],
				tabIndex:0
			}
		},
		onLoad() {
		
		},
		onReady(){
			 //svga的播放情况
			const player = new SVGA.Player('#svgaBox');
			var parser = new SVGA.Parser('#svgaBox');
			//注意，这里必须是服务器地址，否则报错
			parser.load('../../static/word.svga', function(videoItem) {       
			  player.loops = 1000;  // 设置循环播放次数是1
			  player.setVideoItem(videoItem);
			  player.startAnimation();
			});
			setTimeout(() => {
				if(this.clickOn){
					uni.navigateTo({
						url: './videoPage?id=1',
					   });
				}
			}, 5000);
		},
		onShow() {
			const phoneInfo = uni.getSystemInfoSync(); // 获取手机系统信息
			this.statusBarHeight = phoneInfo.statusBarHeight
		},
		methods: {
			changeTab(index){
				this.tabIndex=index
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #071522;
	}
	.head{
		display: flex;
		justify-content: space-between;
		margin: 8rpx 30rpx;
		image{
			width: 64rpx;
			height: 64rpx;
		}
		&_left{
			image{
				width: 64rpx;
				height: 72rpx;
				margin-left: 30rpx;
			}
		}
	}
	.node{
		width: 690rpx;
		height: 136rpx;
		background: rgba(46,125,204,0.5);
		border-radius: 28rpx;
		border: 2rpx solid #2E7DCC;
		font-family: PingFangSC, PingFang SC;
		display: flex;
		justify-content: space-between;
		margin: 38rpx auto 30rpx;
		padding: 30rpx 49rpx;
		box-sizing: border-box;
		&_num{
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
		}
		&_name{
			font-weight: 500;
			font-size: 28rpx;
			color: #B8DBFF;
		}
	}
	.energyItme {
			height: 102rpx;
			width: 102rpx;
			position: absolute;
			top: 200rpx;
			left: 200rpx;
			animation: identifier 3s linear infinite;
			// transition: all 2s;
		}
		image{
			width: 72rpx;
			height: 72rpx;
		}
		.animate {
			animation: exampleAnimation 1s linear;
		}
	
		@keyframes exampleAnimation {
			0% {
				opacity: 1;
				transform: translateY(10rpx);
			}
	
			100% {
				opacity: 0;
				transform: translate(-50%, 400rpx);
				left: 50%;
			}
		}
	
		@keyframes identifier {
			0% {
				transform: translateY(0rpx);
			}
	
			50% {
				transform: translateY(30rpx);
			}
	
			100% {
				transform: translateY(0rpx);
			}
		}
	.svgetext{
		text-align: center;
		image{
			width: 320rpx;
			height: 94rpx;
		}
		#svgaBox{
			width: 600rpx;
			height: 600rpx;
			margin: -132rpx auto 0;
		}
	}
	.shopBox {
		.tabLists {
			// background: #FFFFFF;
			display: flex;
			height: 88rpx;
			align-items: center;
			justify-content: space-between;
			margin: 30rpx 30rpx;
			image{
				width: 40rpx;
				height: 40rpx;
			}
			&_left{
				display: flex;
			}
			&_left :nth-child(2){
				margin-left: 60rpx;
			}
			
			.tabItem {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #9696A0;
				// line-height: 88rpx;
				text-align: center;
				font-style: normal;
			}
			.color{
				color: #FFFFFF;
			}
			.active {
				width: 36rpx;
				height: 8rpx;
				background: #FFFFFF;
				border-radius: 4rpx;
				margin: 20rpx auto 0;
			}
		}
	
		.shopList {
			padding: 20rpx;
			background: #172B3D;
	
			.shopItem {
				padding: 15rpx;
				background: #FFFFFF;
				border-radius: 12rpx;
				margin-bottom: 24rpx;
	
				.shopInfo {
					display: flex;
					align-items: center;
	
					image {
						width: 172rpx;
						height: 172rpx;
					}
	
					.info {
						padding: 10rpx;
						width: 100%;
					}
	
					.title {
						font-size: 30rpx;
						font-family: Source Han Sans CN;
						font-weight: bold;
						color: #333333;
					}
	
					.title1 {
						font-size: 26rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #888888;
					}
	
					.money {
						color: #ff3456;
	
						text {
							font-size: 44rpx;
						}
					}
	
					.tagBox {
						margin-top: 35rpx;
						display: flex;
						flex-wrap: wrap;
	
						.tag {
							padding: 6rpx 14rpx;
							color: #1e84f1;
							border: 2rpx solid #1e84f1;
							border-radius: 4rpx;
							font-size: 20rpx;
							margin-right: 10rpx;
	
						}
					}
				}
	
				.btn {
					width: 160rpx;
					height: 64rpx;
					border-radius: 32rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 26rpx;
					background-color: #1E84F1;
					color: #fff;
					margin: 10rpx 0;
				}
			}
		}
	}
</style>
